<script setup lang="tsx">
defineOptions({
  name: "pmPlanDetail"
});

import { ref, computed } from "vue";
import commonTable from "@/views/common/components/commonTable/index.vue";
import { planStatusStyleFn } from "../hooks";
import ReTableTag from "@/components/ReTableTag";
import { tagMapOption } from "../hooks.tsx";

interface Props {
  data: Record<string, any>;
  chart?: number;
}

const props = withDefaults(defineProps<Props>(), { data: () => null, chart: 1 });

const tableCloumns: Array<CommonTable.TableCloumnsType> = [
  {
    label: "EQP ID",
    prop: "deviceId",
    width: 120
  },
  {
    label: "Plan No",
    prop: "planNo",
    width: 130
  },
  {
    label: "Plan Title",
    prop: "planTitle",
    width: 130
  },
  {
    label: "Category",
    prop: "category",
    width: 120
  },
  {
    label: "Plan Status",
    prop: "planStatus", // 1、厂务  PROCESSING  INACTIVE  WAITING    2、fab机台  processing  inActive  waiting
    width: 120,
    tagMapOption,
    defaultTagValue: "PROCESSING",
    mapRow: ({ row: { planStatus: value = "", planStatusName: label = "" } }: any) => ({ value, label })
  },
  {
    label: "Trigger Code",
    prop: "triggerCode",
    width: 130
  },
  {
    label: "Early Date",
    prop: "earlyDate",
    width: 130
  },
  {
    label: "Due Date",
    prop: "dueDate",
    width: 130
  },
  {
    label: "Late Date",
    prop: "lateDate",
    width: 130
  }
];

const dialogVisible = defineModel({ type: Boolean, default: false });
const contentBoxTableRef = ref<HTMLElement | null>(null);
const commonTableRef = ref<CommonTable.TableRefType>(null);

const list = computed(() => mapData(props.data));

const mapData = (data: Record<string, any> | null): Array<{ key: string; label: string; value: string | number; text?: string; span?: number }> => {
  if (!data) return [];
  const { planNo = "", eqpId = "", deviceId = "", name = "", planTitle = "", area = "", deviceArea = "" } = data;
  const d_1 = {
    key: "planNo",
    label: "Plan No",
    value: planNo
  };
  const d_2 = {
    key: "eqpId",
    label: "EQP ID",
    value: deviceId
  };
  const d_4 = {
    key: "name",
    label: "Plan Title",
    value: planTitle
  };
  const d_5 = {
    key: "area",
    label: "Area",
    value: deviceArea
  };
  return [d_1, d_2, d_4, d_5];
};

const headerCellStyleFn = ({ row, column, rowIndex, columnIndex }: CommonTable.CellType): Record<string, string> => {
  const style = {};
  if (columnIndex === 5) {
    style["text-align"] = "center";
  }
  return style;
};
</script>

<template>
  <px-dialog v-model="dialogVisible" width="1200px">
    <template #title>
      <div class="detail-dialog-title">
        <div v-if="data?.planTitle" class="title-name">{{ data?.planTitle }}</div>
        <ReTableTag
          v-if="data?.planStatus"
          defaultValue="PROCESSING"
          :value="data?.planStatus"
          :label="data?.planStatusName"
          :option="tagMapOption"
        />
        <!-- <div v-if="data?.planStatus" :class="['title-status', `s-${data?.planStatus?.toLowerCase()}`]">
          {{ chart === 1 ? data?.planStatusName : data?.planStatus }}
        </div> -->
        <div class="title-eqpId">{{ `EQP ID：${data?.deviceId || "--"}` }}</div>
      </div>
    </template>
    <div class="detail-dialog-content">
      <div class="content-label">PM Plan Basic Info</div>
      <div class="content-box">
        <px-descriptions class="base-info-table" :column="2" border>
          <px-descriptions-item v-for="item in list" :key="item.key" :label="item.label" :span="1" label-class-name="base-info-table-item-label">
            <span>{{ item.value || "--" }}</span>
          </px-descriptions-item>
        </px-descriptions>
      </div>
      <div class="content-label">Link Child PM Plan</div>
      <div ref="contentBoxTableRef" class="content-box">
        <commonTable
          ref="commonTableRef"
          indexNeed
          :pagination="false"
          :tableCloumns="tableCloumns"
          :height="300"
          :list="data?.itemDtoList"
          :header-cell-style="headerCellStyleFn"
        />
      </div>
    </div>
  </px-dialog>
</template>

<style lang="scss" scoped>
.detail-dialog-title {
  display: flex;
  gap: 12px;
  align-items: center;
  font-weight: 600;

  .title-name {
    font-size: 18px;
    font-weight: 600;
    line-height: 1;
    color: #555;
  }

  .title-status {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px 10px;
    font-size: 14px;
    line-height: 1;
    border-radius: 4px;
  }

  .s-processing {
    color: #00cb78;
    background-color: #d0f7e7;
  }

  .s-inactive {
    color: #909399;
    background-color: #e9e9eb;
  }

  .s-waiting {
    color: #f59e0b;
    background-color: #fde68a;
  }

  .title-eqpId {
    font-size: 14px;
    color: #666;
  }
}

:deep(.base-info-table-item-label) {
  width: 120px;
}

.detail-dialog-content {
  .content-label {
    margin: 24px 0;
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    color: #555;

    &:first-of-type {
      margin-top: 8px;
    }
  }
}
</style>
